//测试登录状态保存 并新增多次角色
// @ts-check
import { test, expect } from "@playwright/test";
import fs from "fs";
import path from "path";

// 修改文件名以反映实际存储机制
const LOCAL_STORAGE_FILE = path.join(
  __dirname,
  "..",
  "chaoxing-localstorage.json"
);
const LAST_URL_FILE = path.join(__dirname, "..", "chaoxing-last-url.txt");

test("亿有聚自动登录 - 支持状态保存", async ({ page, context }) => {
  console.log("🚀 启动亿有聚自动登录脚本...");

  // 尝试加载已保存的 localStorage
  let hasValidStorage = false;
  let lastVisitedUrl = "http://localhost:5777/#/auth/login";

  try {
    // 检查 localStorage 文件是否存在
    if (fs.existsSync(LOCAL_STORAGE_FILE)) {
      const storageData = JSON.parse(
        fs.readFileSync(LOCAL_STORAGE_FILE, "utf-8")
      );

      // 先访问页面，然后设置 localStorage
      await page.goto("http://localhost:5777");
      await page.evaluate((data) => {
        // 设置所有 localStorage 项
        Object.keys(data).forEach((key) => {
          localStorage.setItem(key, data[key]);
        });
      }, storageData);

      console.log("✅ 成功加载已保存的登录状态");
      hasValidStorage = true;

      // 加载上次访问的URL
      if (fs.existsSync(LAST_URL_FILE)) {
        lastVisitedUrl = fs.readFileSync(LAST_URL_FILE, "utf-8").trim();
        console.log(`📖 上次访问的页面: ${lastVisitedUrl}`);
      }
    } else {
      console.log("ℹ️  未找到保存的登录状态，将进行首次登录");
    }
  } catch (error) {
    console.log("⚠️  加载登录状态失败，将重新登录:", error.message);
    hasValidStorage = false;
  }

  // 如果有有效的 localStorage，直接跳转到上次访问的页面
  if (hasValidStorage) {
    console.log("🔄 尝试使用已保存的登录状态访问页面...");
    await page.goto(lastVisitedUrl); //跳转到上次访问的页面
    await page.waitForLoadState("networkidle"); //等待网络空闲

    // 验证登录状态是否仍然有效
    const currentUrl = page.url();
    console.log(`当前页面URL: ${currentUrl}`);

    // 检查是否被重定向到登录页面
    if (
      currentUrl.includes("login") ||
      currentUrl === "http://localhost:5777/#/auth/login"
    ) {
      console.log("⚠️  登录状态已过期，需要重新登录");
      hasValidStorage = false;

      // 删除过期的存储文件
      try {
        if (fs.existsSync(LOCAL_STORAGE_FILE)) {
          fs.unlinkSync(LOCAL_STORAGE_FILE);
        }
        if (fs.existsSync(LAST_URL_FILE)) {
          fs.unlinkSync(LAST_URL_FILE);
        }
      } catch (error) {
        console.log("清理过期文件时出错:", error.message);
      }
    } else {
      console.log("🎉 登录状态有效，已成功访问页面！");
      console.log(`页面标题: ${await page.title()}`);

      return; // 登录状态有效，直接结束
    }
  }

  // 如果没有有效存储或已过期，进行登录流程
  console.log("📝 开始手动登录流程...");

  // 确保在登录页面
  if (!page.url().includes("localhost:5777")) {
    await page.goto("http://localhost:5777/#/auth/login");
    await page.waitForLoadState("networkidle");
  }

  console.log("页面已加载完成，现在查看页面元素...");

  // 等待用户手动填写表单
  console.log("👤 请在浏览器中手动填写用户名和密码...");
  console.log("🔑 填写完成后，请手动点击登录按钮");
  console.log("⏳ 系统将自动检测登录状态变化并保存登录信息...");

  // 监听页面导航变化来检测登录
  let loginSuccess = false;
  let finalUrl = "";

  page.on("response", async (response) => {
    // 监听登录相关的API响应
    if (
      response.url().includes("login") ||
      response.url().includes("passport")
    ) {
      const status = response.status();
      console.log(`🔍 检测到请求: ${response.url()}, 状态码: ${status}`);
    }
  });

  // 等待页面URL变化或特定元素出现来判断登录成功
  try {
    // 等待页面跳转或登录成功的标志
    await page.waitForFunction(
      () => {
        // 检查URL是否已经跳转（通常登录成功后会跳转到主页面）
        return (
          window.location.href !== "http://localhost:5777/#/auth/login" &&
          !window.location.href.includes("login")
        );
      },
      { timeout: 180000 }
    ); // 等待3分钟
    await page.goto("http://localhost:5777/#/role");
    console.log("🎉 检测到页面跳转，登录成功！");
    loginSuccess = true;
    finalUrl = page.url();
    console.log(`当前页面URL: ${finalUrl}`);
  } catch (error) {
    // 如果URL没有变化，尝试检查页面内容变化
    console.log("🔍 URL未发生跳转，检查页面内容变化...");

    try {
      // 等待可能的登录成功标志元素
      await page.waitForSelector('[class*="_scroll__fixed_"]', {
        timeout: 15000,
      });
      loginSuccess = true;
      finalUrl = page.url();
      console.log("🎉 检测到用户信息元素，登录成功！");
    } catch (innerError) {
      console.log("❌ 未检测到明确的登录成功标志，登录可能失败");
      console.log("请检查用户名密码是否正确，或手动确认登录状态");
    }
  }

  // 如果登录成功，保存 localStorage 和当前URL
  if (loginSuccess) {
    try {
      // 获取并保存 localStorage
      const localStorageData = await page.evaluate(() => {
        const data = {};
        for (let i = 0; i < localStorage.length; i++) {
          const key = localStorage.key(i);
          if (key) {
            data[key] = localStorage.getItem(key);
          }
        }
        return data;
      });

      fs.writeFileSync(
        LOCAL_STORAGE_FILE,
        JSON.stringify(localStorageData, null, 2)
      );
      console.log("💾 登录状态已保存到本地");
      console.log(
        "🔑 保存的认证信息包括:",
        Object.keys(localStorageData).filter(
          (key) =>
            key.includes("access") ||
            key.includes("token") ||
            key.includes("auth")
        )
      );

      // 保存当前URL
      fs.writeFileSync(LAST_URL_FILE, finalUrl);
      console.log(`📚 当前页面URL已保存: ${finalUrl}`);

      console.log("✅ 登录流程完成 - 状态：成功");
      console.log(`📄 页面标题: ${await page.title()}`);

      console.log("\n🔄 下次运行脚本时将自动使用已保存的登录状态");
    } catch (error) {
      console.log("⚠️  保存登录状态时出错:", error.message);
    }
  } else {
    console.log("❌ 登录流程未完成或失败");
    console.log("请重新运行脚本并确保正确填写登录信息");
  }

  // 保持页面打开一段时间以便观察
  await page.waitForTimeout(5000);
});

test("角色管理 - 新增角色测试", async ({ page, context }) => {
  console.log("🚀 开始角色管理测试...");

  // 加载保存的登录状态
  try {
    if (fs.existsSync(LOCAL_STORAGE_FILE)) {
      const storageData = JSON.parse(
        fs.readFileSync(LOCAL_STORAGE_FILE, "utf-8")
      );

      // 先访问页面，然后设置 localStorage
      await page.goto("http://localhost:5777");
      await page.evaluate((data) => {
        Object.keys(data).forEach((key) => {
          localStorage.setItem(key, data[key]);
        });
      }, storageData);

      console.log("✅ 登录状态加载成功");
    } else {
      console.log("❌ 未找到登录状态，请先运行登录测试");
      return;
    }
  } catch (error) {
    console.log("⚠️  加载登录状态失败:", error.message);
    return;
  }

  // 导航到角色管理页面
  console.log("📍 导航到角色管理页面...");
  await page.goto("http://localhost:5777/#/role");
  await page.waitForLoadState("networkidle");

  // 验证页面加载成功
  await expect(page).toHaveTitle(/角色管理/); // 等待页面标题包含"角色管理"
  console.log("✅ 角色管理页面加载成功");

  // 等待页面元素加载
  await page.waitForSelector('button:has-text("新增角色")', { timeout: 10000 });

  // 记录初始的角色数量
  const initialCount = await page
    .locator("text=/共 \\d+ 条记录/")
    .textContent();
  console.log(`📊 测试开始时角色数量: ${initialCount}`);

  // 🔄 执行10次新增角色操作
  const totalIterations = 2;
  const createdRoles = []; // 记录创建的角色名称

  for (let i = 1; i <= totalIterations; i++) {
    console.log(
      `\n🔄 ============ 第 ${i}/${totalIterations} 次执行 ============`
    );

    // 记录当前循环开始前的角色数量
    const beforeCount = await page
      .locator("text=/共 \\d+ 条记录/")
      .textContent();
    console.log(`📊 第${i}次执行前角色数量: ${beforeCount}`);

    // 点击新增角色按钮
    console.log(`🔘 第${i}次点击新增角色按钮...`);
    await page.getByRole("button", { name: "新增角色" }).click();

    // 等待对话框中的表单元素出现（使用正确的方法）
    await page
      .getByRole("textbox", { name: "* 角色名称" })
      .waitFor({ timeout: 10000 });
    console.log(`✅ 第${i}次新增角色对话框打开成功`);

    const roleName = `自动化测试角色_第${i}次pa`;
    createdRoles.push(roleName);

    // 填写表单
    console.log(`📝 第${i}次开始填写新增角色表单...`);

    // 清空并填写角色名称
    await page.getByRole("textbox", { name: "* 角色名称" }).fill(roleName);
    console.log(`✍️  第${i}次角色名称: ${roleName}`);

    // 清空并填写排序（使用不同的排序值）
    const sortOrder = 1000 + i;
    await page
      .getByRole("textbox", { name: "* 排序" })
      .fill(sortOrder.toString());
    console.log(`✍️  第${i}次排序: ${sortOrder}`);

    // 清空并填写默认路由
    await page.getByRole("textbox", { name: "* 默认路由" }).fill("/dashboard");
    console.log(`✍️  第${i}次默认路由: /dashboard`);

    // 清空并填写备注
    const remark = `批量自动化测试创建 - 第${i}次执行 - ${new Date().toLocaleString(
      "zh-CN"
    )}`;
    await page.getByRole("textbox", { name: "备注" }).fill(remark);
    console.log(`✍️  第${i}次备注: ${remark}`);

    console.log(`✅ 第${i}次表单填写完成`);

    // 提交表单
    console.log(`📤 第${i}次提交表单...`);
    await page.getByRole("button", { name: "确认" }).click();

    // 等待提交成功的提示
    try {
      await page.waitForSelector("text=操作成功", { timeout: 10000 });
      console.log(`🎉 第${i}次新增角色成功！`);

      // 等待页面更新
      await page.waitForTimeout(2000);

      // 验证角色是否出现在列表中
      const roleExists = (await page.locator(`text=${roleName}`).count()) > 0;
      if (roleExists) {
        console.log(`✅ 第${i}次新角色已成功添加到角色列表中`);

        // 记录添加后的角色数量
        const afterCount = await page
          .locator("text=/共 \\d+ 条记录/")
          .textContent();
        console.log(`📊 第${i}次执行后角色数量: ${afterCount}`);

        // 验证角色信息
        const roleRow = page.locator(`tr:has-text("${roleName}")`);
        const hasCorrectStatus =
          (await roleRow.locator("text=启动").count()) > 0;
        const hasCorrectRemark =
          (await roleRow.locator(`text=${remark}`).count()) > 0;

        if (hasCorrectStatus && hasCorrectRemark) {
          console.log(`✅ 第${i}次角色信息验证通过 - 状态和备注都正确`);
        } else {
          console.log(`⚠️  第${i}次角色信息可能不完整`);
        }
      } else {
        console.log(`❌ 第${i}次新角色未在列表中找到`);
      }
    } catch (error) {
      console.log(`❌ 第${i}次等待成功提示超时:`, error.message);

      // 检查是否有错误提示
      const errorMsg = await page
        .locator("text=/错误|失败|Error/")
        .textContent()
        .catch(() => null);
      if (errorMsg) {
        console.log(`❌ 第${i}次发现错误信息: ${errorMsg}`);
      }
    }

    console.log(`🏁 第${i}次执行完成\n`);
  }

  // 最终统计和验证
  console.log("\n📊 ============ 批量测试完成统计 ============");
  const finalCount = await page.locator("text=/共 \\d+ 条记录/").textContent();
  console.log(`📈 测试开始时: ${initialCount}`);
  console.log(`📈 测试结束时: ${finalCount}`);
  console.log(`🎯 总共尝试创建: ${totalIterations} 个角色`);
  console.log(`✅ 成功创建的角色名称列表:`);
  createdRoles.forEach((name, index) => {
    console.log(`   ${index + 1}. ${name}`);
  });

  console.log("🏁 批量角色管理测试完成");

  // 截图保存测试结果
  const timestamp = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
  await page.screenshot({
    path: `test-results/batch-role-management-${timestamp}.png`,
    fullPage: true,
  });
  console.log(
    `📸 批量测试结果截图已保存: test-results/batch-role-management-${timestamp}.png`
  );
});
